<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对其】</title>
		<!-- 垂直方向对象属性 vertical-align
		     使用方法：1.用于表格中单元格垂直居中
			          2.行内元素以及行内块元素的垂直居中
					  【文本和图片垂直居中效果】
					  对齐分为四种：基线对齐、顶部对齐
					              居中对齐、底部对齐
					  元素种类：块元素、行元素、行内块元素
					  块元素特点:独占一行、设置宽高
					  行元素特点：一行内显示、不设置宽高
					  网页：元素之间嵌套生成
					  行元素与块元素可以任意嵌套
					  前提：设置宽高---行套块
					               ---块套块     √
								   ---块套行     √
					  前提：一行内显示---行套块    √
					                 ---块套块   ×
									---块套行
									---行套行    √
		 -->
		  <style>
		  i mg:nth-child(1){
			 /* vertical-align: baseline; 默认基线对齐*/
			 vertical-align: baseline;
		 }
		 /* 问题：派生选择器，特点：找后代 p img */
		  im g:nth-child(2){
			  /* vertical-align: baseline; 顶部对齐*/
			  vertical-align: top;
			  width: 500px;
			  height: 500px;
			  background: #ee5526;
		 }
		 img.baseline{
			 vertical-align:top;
		 }
		 img.top{
			  vertical-align: top;
		 }
		 img.middle{
			 vertical-align: middle;
		 }
		 img.bottom{
			  vertical-align: bottom;
		 }
	 </style>
	</head>
	<body>
		<!-- 需求结构：4个p,嵌套文字：图片叫什么名字
		                   文字后加img,设定宽高：25~100px
						   每个图片后面加：基线对齐、顶部对齐
						   居中对齐、底部对齐
		 -->
		 <h1>文本与图片垂直属性</h1>
		 <p>库洛米1<img class="baseline" src="img/1.png" alt="库洛米1" width="100px" height="100px">基线对齐</p>
		 <p>库洛米2<img class="top" src="img/2.png" alt="库洛米2" width="100px" height="100px">顶部对齐</p>
		 <p>库洛米3<img class="middle" src="img/3.png" alt="库洛米3" width="100px" height="100px">居中对齐</p>
		 <p>库洛米4<img class="bottom" src="img/4.png" alt="库洛米4" width="100px" height="100px">底部对齐</p>
	<!-- css选择器---抓第一张图片.......
	 思路：派生选择器：找后代+伪类选择器：添加效果
	 错误原因：html结构不符合派生特点
	 p img:nth-child(1)
	 -->
	
	</body>
</html>